<template>
  <div class="upload-info">
    <div>
      <el-upload
        class="upload-pic"
        :action="domain2"
        :data="QiniuData"
        :on-success="uploadSuccess"
        :limit="3"
        :headers="myHeaders"
        multiple
      >
        <el-button size="small" type="primary">选择图片</el-button>
      </el-upload>
      <div>
        <img class="pic-box" :src="uploadPicUrl" v-if="uploadPicUrl">
      </div>
    </div>
    <div>
      <el-button type="primary" >提交</el-button>
      <el-button type="info" plain >取消</el-button>
    </div>
  </div>
</template>

<script>
import {getAuthToken} from "@/api/file";
import {getToken} from "@/utils/auth";
export default {
  name: "upload",
  data() {
    return {
      myHeaders:{ 'Authorization': 'Bearer ' + getToken() },
      QiniuData: {
        key: "", //图片名字处理
        token: "" //七牛云token
      },
      // 七牛云的上传地址（华南区） 七牛云服务器
      domain: "https://upload-z2.qiniup.com",
      // 自己的服务器
      domain2: "http://localhost/dev-api/file/qiniu/upload",
      qiniuaddr: "\n" +
        "http://rcdx67svg.hn-bkt.clouddn.com", // 七牛云的图片外链地址
      uploadPicUrl: "", //提交到后台图片地址
    };
  },
  methods: {
    // 文件名字拼接
    beforeAvatarUpload(file) {
      this.QiniuData.key = `upload_pic_${file.name}`;
    },
    // 上传成功修   拼接图片访问路径
    uploadSuccess(response, file, fileList) {
      console.log(fileList);
      this.uploadPicUrl = this.qiniuaddr+"/"+response.key;
     // this.uploadPicUrl = this.qiniuaddr+"/"+response;
      // 视屏上传成功需要修改 为vidio 播放
    },
    //请求后台拿七牛云token
    getQiniuToken() {
      getAuthToken().then(rep=>{
        this.QiniuData.token = rep;
      })
    }
  },
  created() {
    this.getQiniuToken();
  },
};
</script>

